<template>
  <div>
    <nav-bar class="navbar">
      <span slot="left" class="iconfont icon-huitui leftInfo" @click="$router.back()"></span>
      <div slot="center" class="center">账号管理</div>
      <span slot="right" class="iconfont icon-gengduo right"></span>
    </nav-bar>
    <ul class="profile-item">
      <li class="profile-info">
        <img src="~assets/img/mall.jpg" alt="">
        <div>
          <span>{{userList.username}}</span>
          <span>邮箱：{{userList.email}}</span>
        </div>
      </li>
      <li>
        <span>修改密码</span>
        <span class="iconfont icon-youjiantou icon"></span>
      </li>
      <li>
        <span>修改个人信息</span>
        <span class="iconfont icon-youjiantou icon"></span>
      </li>
      <li>
        <span>收货地址管理</span>
        <span class="iconfont icon-youjiantou icon"></span>
      </li>
    </ul>
    <div class="handel">
      <span class="iconfont icon-yijianfankui">意见反馈</span>
      <span class="font">ZXG 客户端</span>
      <span class="iconfont icon-wode" @click="loginOut">退出登录</span>
    </div>
  </div>
</template>
<script>
import navBar from 'components/common/navbar/navBar'

export default {
  name: 'Profile',
  data() {
    return {
      userList: []
    }
  },
  components: {
    navBar
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    async loginOut() {
      const res = await this.$require({
        url: '/user/logout',
        method: 'post'
      })
      if (res.status == 0) {
        //  清空token
        window.sessionStorage.clear('token')
        this.$router.push('/home')
      }
    },
    async getUserInfo() {
      const res = await this.$require({
        url: '/user/info',
        method: 'get'
      })
      if (res.status == 0) {
        this.userList = res.data
      }
    }
  }
}
</script>
<style scoped lang="scss">
.navbar {
  background-color: #f6f6f6;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  .leftInfo {
    font-weight: bold;
    font-size: 20px;
    display: block;
  }
  .center {
    font-weight: 500;
  }
  .right {
    font-weight: bold;
    font-size: 20px;
    display: block;
  }
}
.profile-item {
  margin-top: 50px;
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      margin-right: 8px;
    }
    span {
      font-size: 15px;
      color: #666666;
      display: block;
    }
    .icon {
      font-weight: 300;
      color: #999;
    }
  }
  .profile-info {
    justify-content: left;
    span {
      display: block;
      margin-bottom: 5px;
    }
    img {
      border-radius: 50%;
    }
  }
}
.handel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin-top: 80px;
  padding: 0 20px;
  span {
    color: #666666;
  }
  .font {
    font-size: 14px;
  }
}
</style>
